<template>
  <!-- 记录卡片 -->
  <view
    class="page flex bg-white mt-17 borRadius-19 justify-between align-center"
  >
    <view class="flex leftPart">
      <view class="imgPart">
        <image
          :src="
            items.avatar
              ? items.avatar
              : 'https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/infoLogo.png'
          "
          class="img"
          mode="scaleToFill"
        />
      </view>
      <view class="casing flex justify-between flex-column">
        <view class="txt fw-400 text-container">{{ items[dataStatus] }}</view>
        <view class="date fw-400">{{
          items.createTime
            ? timeStatus
              ? items.createTime
              : items.createTime.split(" ")[0]
            : "-"
        }}</view>
      </view>
    </view>
    <view class="rightPart flex flex-column">
      <view
        class="num dinAlternate"
        v-if="status === 1 || status === 3 || status === 5 || status === 6"
        :class="
          items.type === 2
            ? status === 6
              ? 'col-999'
              : 'col-C7B'
            : items.type === 3 || items.status === 2
            ? 'col-999'
            : ''
        "
      >
        <!-- type等于类型1是收入，2是支出，3是冻结 -->
        <!-- status属于 -->
        <text v-if="status === 5 || status === 6">{{
          items.type === 1 || items.type === 3 ? "+" : "-"
        }}</text
        >{{ status !== 5 && status !== 6 ? "¥" : ""
        }}{{
          status === 5
            ? items.integral
            : status === 6
            ? items.type === 2
              ? items.voucher
              : items.voucher
            : items.amount
        }}</view
      >
      <view class="btn fw-400" v-if="status === 2 || status === 4"
        >普通用户</view
      >
    </view>
  </view>
</template>

<script>
export default {
  name: "minCard",
  props: {
    // 这个模块属于什么页面1234分享仓鼠5是积分列表
    status: {
      type: Number,
      defulet: 0,
    },
    items: {
      type: Object,
      defulet: {},
    },
    timeStatus: {
      type: Boolean,
      defulet: false,
    },
  },
  data() {
    return {
      num: 86,
    };
  },
  computed: {
    dataStatus() {
      let str = {
        1: "remark",
        2: "nickname",
        3: "remark",
        4: "account",
        5: "mark",
        6: "mark",
      };
      return str[this.status];
    },
  },
  created: function () {},
  mounted: function () {},
  methods: {},
};
</script>

<style scoped lang="scss">
.page {
  padding: 34.88rpx 27.91rpx;
  .imgPart {
    display: inline-block;
    width: 73.26rpx;
    height: 73.26rpx;
    .img {
      border-radius: 40rpx !important;
      height: 100%;
      width: 100%;
    }
  }
  .casing {
    display: inline-block;
    margin-left: 19.19rpx;
    width: 82%;
    .txt {
      position: relative;
      top: -4rpx;
      font-size: 28rpx;
      color: #272727;
    }
    .date {
      font-size: 20rpx;
      color: #9a9999;
    }
  }
  .num {
    font-weight: bold;
    font-size: 35rpx;
    color: #eb3f3a;
  }
  .col-C7B {
    color: #11cc7b !important;
  }
  .btn {
    padding: 8rpx 16rpx;
    border-radius: 21rpx;
    border: 2rpx solid #272727;
    font-size: 21rpx;
    color: #272727;
  }
}
.col-999 {
  color: #9a9999 !important;
}
.col-F3A {
  color: #eb3f3a !important;
}
.col-c7b {
  color: #11cc7b !important;
}
.leftPart {
  flex: 1;
  display: flex;
  align-items: center;
}
.rightPart {
  min-width: 140rpx !important;
  align-items: flex-end;
}
</style>
